<template>
  <div>
    <!-- 表格 -->
    <Table border :columns="columns" :data="studentList">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>

      <template slot-scope="{ index }" slot="action">
        <!-- 查看 -->
        <Button
          type="success"
          size="small"
          style="margin-right: 5px"
          @click="seeinformation(studentList[index].id)"
        >
          查看
        </Button>

        <!-- 编辑 -->
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="changeStudentShow(index)"
        >
          编辑
        </Button>

        <!-- 删除 -->
        <Button
          type="error"
          size="small"
          @click="removeStu(studentList[index].id)"
        >
          删除
        </Button>
      </template>
    </Table>

    <!-- 编辑学员信息的弹窗 -->
    <Modal v-model="changeShow" title="编辑学员信息" @on-ok="changeStudent">
      <Input v-model="newInfo.name" placeholder="请输入姓名" />
      <br /><br />
      <Input v-model="newInfo.age" placeholder="请输入年龄" />
    </Modal>

    <!-- 添加学员的弹窗 -->
    <Modal
      v-model="addModalShow"
      title="添加学员"
      footer-hide
      :mask-closable="false"
      :closable="false"
    >
      <Form :model="addstudents">
        <FormItem label="姓名">
          <Input
            v-model="addstudents.name"
            placeholder="请输入学员姓名"
          ></Input>
        </FormItem>
        <FormItem label="年龄">
          <Input v-model="addstudents.age" placeholder="请输入学员年龄"></Input>
        </FormItem>
      </Form>
      <Button type="success" @click="addStudent">添加</Button>

      <Button
        @click="$store.commit('changeShow', false)"
        style="margin-left: 50px"
        >取消</Button
      >
    </Modal>
  </div>
</template>

<script>
// 获取学员列表
// 删除指定学员
// 获取指定学员信息
// 修改指定学员信息
// 添加新学员信息
import {
  getStudentList,
  delStudent,
  getStudentInfo,
  changeStudentInfo,
  addStudentList
} from '@/api/user'
import { mapState } from 'vuex'
export default {
  name: 'StudentTable',
  components: {},
  props: {},
  data () {
    return {
      // 配置表格
      columns: [
        {
          title: 'id',
          key: 'id'
        },
        {
          title: 'Name',
          slot: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Action',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
      studentList: [], // 学员列表
      changeShow: false, // 控制编辑弹框显示状态
      newInfo: {}, // 更改学员数据
      // 新建学员信息
      addstudents: {
        name: '',
        age: ''
      }
    }
  },
  computed: {
    ...mapState(['addModalShow'])
  },
  watch: {},
  created () {
    this.loadgetStudentList() // 获取学员列表
  },
  mounted () { },
  methods: {
    // 获取学员列表
    async loadgetStudentList () {
      const { data } = await getStudentList()
      this.studentList = data.students
    },
    // 查看学员信息
    async seeinformation (id) {
      const { data } = await getStudentInfo(id)
      this.$Modal.info({
        title: '学员信息',
        content: `
          Id：${data.id}<br>
          Name：${data.name}<br>
          Age：${data.age}
        `
      })
    },
    // 删除学员
    removeStu (id) {
      this.$Modal.confirm({
        title: '删除学员',
        content: '<p>确定删除学员吗</p>',
        onOk: () => {
          delStudent(id).then(res => {
            this.loadgetStudentList()
          })
        }
      })
    },
    // 对象浅克隆
    clone (obj) {
      const newInfo = {}
      for (const key in obj) {
        newInfo[key] = obj[key]
      }
      return newInfo
    },
    // 点击编辑弹框显示 并将修改的数据放入新的对象中
    changeStudentShow (index) {
      this.changeShow = true
      this.newInfo = this.clone(this.studentList[index])
    },
    // 编辑学员
    async changeStudent () {
      const { data } = await changeStudentInfo(
        this.newInfo.id,
        {
          name: this.newInfo.name,
          age: this.newInfo.age
        }
      )
      // 成功提示 并且重新加载列表
      this.$Message.info(data.msg)
      this.loadgetStudentList()
    },
    // 添加新的学员
    async addStudent () {
      const { data } = await addStudentList(this.addstudents)
      if (this.addstudents.name === '' || this.addstudents.age === '') {
        this.$Message.error(data.msg)
        return
      }
      this.$store.commit('changeShow', false)
      this.loadgetStudentList()
      this.$Message.info(data.msg)
      this.addstudents = {
        name: '',
        age: ''
      }
    }
  }
}
</script>

<style lang='less' scoped>
</style>
